<template>
    <div>
        <el-card shadow="always" v-for="(item,index) in list" :key="index" v-show="titleId == item.titleId" style="height: 750px;">
            <div slot="header" style="display: flex;justify-content: space-between;align-items: center;">
                <div style="color: #FFFFFF;font-weight: 700">设备当前状态</div>
            </div>
            <div style="display: flex;align-items: center">
                <div style="font-weight: 700;margin-right: 15px;">{{ item.title }}</div>
                <div style="font-size: 15px;">{{ item.code }}</div>
            </div>
            <el-divider></el-divider>
            <div class="grid-container">
                <div class="grid-item" v-for="(item1,index) in item.dataList" :key="index">
                    <div style="border-radius: 100%;background-color: #1ab394;width: 80px;height: 80px;display: flex;justify-content: center;align-items: center; ">
                        <img :src="item1.img">
                    </div>
                    <div style="margin-left: 20px;">
                        <div style="color: #1ab394;font-weight: 700;font-size: 30px;">{{ item1.value }}</div>
                        <div style="font-size: 20px;font-weight: 700;">{{item1.name}}({{item1.unit}})</div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import  bus from '@/utils/bus'
export default {
    name: 'right',
    data(){
        return{
            titleId:1001,
            list:[
                {
                    titleId:1001,
                    title:'气象监测设备1号',
                    code:'40192784',
                    dataList:[
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'风速',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                    ]
                },
                {
                    titleId:1002,
                    title:'气象监测设备2号',
                    code:'40192784',
                    dataList:[
                        {
                            value:30.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:40.5,
                            name:'风速',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                    ]
                },
                {
                    titleId:1003,
                    title:'气象监测设备3号',
                    code:'40192784',
                    dataList:[
                        {
                            value:30.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:40.5,
                            name:'风速',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                    ]
                },
                {
                    titleId:1004,
                    title:'气象监测设备4号',
                    code:'40192784',
                    dataList:[
                        {
                            value:30.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:40.5,
                            name:'风速',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                        {
                            value:23.5,
                            name:'温度',
                            unit:'℃',
                            img:require('@/assets/images/group/风速.png')
                        },
                    ]
                },
            ],
        }
    },
    created() {
        bus.$on('id',(id)=>{
            console.log('兄弟传过来的值',id)
            this.titleId = id
        })
    },
    methods:{
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-card__header {
    background-color: #1ab394;
    padding: 8px 15px 7px;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .grid-item {
        width: 33.3%;
        border-bottom: 1px solid #e6ebf5;
        border-right: 1px solid #e6ebf5;
        padding: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    }
}
@media (max-width:768px) {
    .grid-container{
        .grid-item{
            width: 50%;
        }
    }

}

</style>
